<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>作业2</title>
	<style type="text/css">
		body{
			margin: 0;
			padding: 0;
		}
		/* 页头 */
		.head{
			width: 100%;
			height: 50px;
			border: 1px solid black;
		}
		/* LOGO */
		.logo{
			float: left;
			width: 10%;
			height: 30px;
			margin: 10px 0 10px 10%; 
			border: 1px solid black;
		}
		/* 导航菜单 */
		.sitenav{
			float: left;
			width: 40%;
			height: 30px;
			margin: 10px 0 10px 2%;
		}
		/* 导航列表 */
		.nav{
			float: left;
			width: 12%;
			height: 30px;
			list-style: none;
			border: 1px solid black;
			margin-right: 20px;
		}
		/* 搜索框 */
		.search{
			float: right;
			width: 12%;
			height: 30px;
			border: 1px solid black;
			margin: 10px 10% 10px;
		}
		/* 主体部分 */
		.haha{
			width: 80%;
			margin: 0 auto;
			padding: 10px;
		}
		/* 左侧边栏 */
		.left{
			float: left;
			width: 19%;
		}
		/* 主体内容 */
		.right{
			float: left;
			width: 79%;
			padding-left: 2%;
		}
		/* 我是学员 */
		.u1{
			border: 1px solid black;
			padding: 15px;
			padding-bottom: 0;
		}
		/* 会员特权 */
		.u2{
			border: 1px solid black;
			padding: 15px;
			padding-bottom: 0;
		}
		/* 已购课程 */
		.u3{
			border: 1px solid black;
			padding: 15px;
			padding-bottom: 0;
		}
		/* 侧边栏文章列表 */
		.li1{
			list-style: none;
			height: 50px;
			margin-bottom: 15px;
			border: 1px solid black;
		}
		/* 主体内容文章列表 */
		.li2{
			list-style: none;
			height: 102px;
			margin-bottom: 15px;
			border: 1px solid black;
		}
		/* 页脚 */
		.footer{
			clear: both;
			width: 100%;
			height: 80px;
			border: 1px solid black;
		}
	</style>
</head>
<body>
	<div class="head">
		<div class="logo">
			LOGO
		</div>
		<div class="sitenav">
			<li class="nav">导航1</li>
			<li class="nav">导航2</li>
			<li class="nav">导航3</li>
			<li class="nav">导航4</li>
			<li class="nav">导航5</li>
		</div>
		<div class="search">
			这里是搜索框
		</div>
	</div>
	<div class="head">
		<div class="logo">
			副LOGO
		</div>
		<div class="sitenav">
			<li class="nav">副导航1</li>
			<li class="nav">副导航2</li>
			<li class="nav">副导航3</li>
			<li class="nav">副导航4</li>
			<li class="nav">副导航5</li>
		</div>

	</div>
	<div class="haha">
		<div class="left">
			<h3>我是学员</h3>
			<ul class="u1">
				<li class="li1">侧标栏导航1</li>
				<li class="li1">侧标栏导航2</li>
				<li class="li1">侧标栏导航3</li>
				<li class="li1">侧标栏导航4</li>
				<li class="li1">侧标栏导航5</li>
			</ul>
			<h3>会员特权</h3>
			<ul class="u2">
				<li class="li1">侧标栏导航1</li>
				<li class="li1">侧标栏导航2</li>
				<li class="li1">侧标栏导航3</li>
				<li class="li1">侧标栏导航4</li>
				<li class="li1">侧标栏导航5</li>
		</div>
		<div class="right">
			<h3>已购课程</h3>
			<ul class="u3">
				<li class="li2">内容1</li>
				<li class="li2">内容2</li>
				<li class="li2">内容3</li>
				<li class="li2">内容4</li>
				<li class="li2">内容5</li>
				<li class="li2">内容6</li>
			</ul>
		</div>
	</div>

	<div class="footer">
		底部导航
	</div>
</body>
</html>